<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"/>
    <style>
        .el-col-24{
            height: 45px;
        }
        .el-menu--horizontal{
            height: 45px;
        }
    </style>
    <title>mian page</title>
</head>
<body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
    <el-row>
        <el-col :span="24">
            <el-menu theme="dark" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">ME</el-menu-item>
            </el-menu>
        </el-col>
    <el-row>
    <el-row class="tac">
        <el-col :span="5">
            <div style="height: 700px;overflow:auto;">

                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>维护</template>
                        <el-menu-item-group>
                            <template slot="title">产品配置</template>
                            <el-menu-item index="1-1-1">操作维护</el-menu-item>
                            <el-menu-item index="1-1-2">资源维护</el-menu-item>
                            <el-menu-item index="1-1-3">工作中心维护</el-menu-item>
                            <el-menu-item index="1-1-4">设置点维护</el-menu-item>
                            <el-menu-item index="1-1-5">物料维护</el-menu-item>
                            <el-menu-item index="1-1-6">物料组维护</el-menu-item>
                            <el-menu-item index="1-1-7">作业维护</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="不合格">
                            <el-menu-item index="1-2-1">不合格代码维护</el-menu-item>
                            <el-menu-item index="1-2-2">不合格组维护</el-menu-item>
                            <el-menu-item index="1-2-3">处置组维护</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="系统配置">
                            <el-menu-item index="1-3-1">用户维护</el-menu-item>
                            <el-menu-item index="1-3-2">用户组维护</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>生产</template>
                        <el-menu-item-group>
                            <template slot="title">高级</template>
                            <el-menu-item index="2-1-1">工单下达</el-menu-item>
                            <el-menu-item index="2-1-2">车间作业控制步骤状态</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="产品">
                            <el-menu-item index="2-2-1">车间作业控制报废/删除</el-menu-item>
                            <el-menu-item index="2-2-2">车间作业控制拆分</el-menu-item>
                            <el-menu-item index="2-2-3">车间作业控制合并</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>
        </el-col>

        <el-col :span="19">
            <div style="overflow: auto;">
                <iframe src="activity.html" width="100%" height="700px" frameborder="0" scrolling="no"></iframe>
            </div>
        </el-col>
    </el-row>
</div>

<script>
    var Main = {
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>